<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.一个Hello效果</title>
		<!-- 引入Vue核心库 -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>

	<body>
		<!-- 
				总结：
						1.想让Vue工作，就得创建一个Vue实例，且必须传入一个配置对象。
						2.demo容器中的代码，依然符合HTML规范，只不过其中混入了一些特殊的Vue语法。
						3.demo容器中的HTML代码 + 特殊的Vue语法，组成了【Vue模板】。
						4.el配置：用于指定当前Vue实例服务于哪个容器，值为css选择器字符串。
						5.data配置：用于存储数据，值暂时写成一个对象（以后学了组件，就要写成成函数了）。
		 -->

		<!-- 第一步：提前准备好一个容器 -->
		<div id="demo">
			<h1>Hello,{{name}}</h1>
		</div>

		<script type="text/javascript" >
			//关闭掉Vue的生产提示
			Vue.config.productionTip = false

			//第二步：创建一个Vue实例，且要传入一个配置对象
			new Vue({
				el:'#demo',//el(element)，用于指定当前Vue实例服务于哪个容器，值为css选择器字符串
				data:{ //用于配置数据，data中的所有数据在容器中都可以直接去使用
					name:'atguigu',
				}
			}) 
		</script>

	</body>

</html>